<template>
	<view class="recProduct">
		<view class="store">
			<view class="flex align-center">
				<image :src="item.brand_logo" class="logo" />
				<text class="brand_name">{{item.merchant_name || '暂无名称'}}</text>
			</view>
			<uv-icon name="arrow-right" color="#DFDDDF" size="14" />
		</view>
		
		<uv-gap height="20" bgColor="transparent" />
		<uv-row :gutter="10">
			<uv-col :span="4" v-for="e in item.product" :key="e.id">
				<navigator hover-class="none" open-type="redirect" :url="`/pages-home/market/details?id=${e.id}`">
					<image :src="e.image" class="img"/>
					<uv-gap height="5" bgColor="transparent" />
					<uv-text :text="e.store_name" size="28upx" color="#333" :lines="1" />
					<view class="price">
						<text>¥</text>
						<text>{{e.price}}</text>
					</view>
				</navigator>
			</uv-col>
		</uv-row>
	</view>
</template>

<script setup>
	import { ref, onMounted  } from 'vue'
	import { getMarketRecProduct } from '@/api'
	
	const props = defineProps({
		rec_id: {
			type: Number,
			default: 0
		}
	})
	
	const item = ref({ id: -1, sid: -1, brand_logo: '', merchant_name: '', product: [] })
	
	const loadData = async () => {
		const { result } = await getMarketRecProduct(props.rec_id)
		item.value = result
	}
	onMounted(() => {
	  if (props.rec_id > 0) loadData()
	})
</script>

<style lang="scss" scoped>
	.recProduct {
		padding: 30upx;
		background-color: #fff;
		.store {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.logo {
				width: 40upx;
				height: 40upx;
				border-radius: 6upx;
				margin-right: 10upx;
			}
			.brand_name {
				color: #333;
				font-size: 30upx;
				margin-right: 10upx;
				font-weight: bold;
			}
		}
		.img {
			width: 100%;
			height: 240upx;
			border-radius: 10upx;
		}
		.price {
			text {
				color: #D48145;
				font-size: 30upx;
				&:first-child{
					font-size: 24upx;
				}
			}
		}
	}
</style>